<template>
  <div id="glrmain" class="layout">
    <a-layout class="layout_show">
      <!-- 头部模块 -->
      <a-layout-header class="layout_header">
        <h1 class="flex_row">
          <span class="sm_box"></span>
          <span class="cen_box">格 利 尔 环 境 检 测 平 台</span>
          <span class="sm_box jumptext" onblur="pointer" style="width: 200px;">
              <a-tooltip placement="left">
              <template slot="title">
               PM2.5标准值：小于75 <br> CO2浓度标准值：小于1000ppm<br>湿度标准值：50%~70%
              </template>
              <span class="action" >
                <a-icon style="color: #b3d4fc" type="question-circle-o"></a-icon>
             </span>
            </a-tooltip>
               <span class="text_notice" @click="handleLogout">退出</span>
               <span class="text_notice" @click="goAdmin">转到后台</span>
            </span>
        </h1>
      </a-layout-header>
      <!-- 主题模块 -->
      <a-layout class="layout_content flex_row">
        <!-- left -->
        <a-layout-content class="content_left flex_column">
          <div class="up">
            <div class="top5">
              <div class="top5-title">
                <div class="col-title">数据状态</div>
              </div>
              <div class="top5-content bottom_content flex_column" style="color: red">
                <div class="flex_row sensor_titles">
                  <span class="sensor_box" style="width: 10%">序号</span>
                  <span class="sensor_box" style="width: 20%">名称</span>
                  <span class="sensor_box" style="width: 10%">状态</span>
                  <span class="sensor_box" style="width: 30%">记录时间</span>
                </div>
                <div id="sensor_list">
                  <ul>
                    <li class="flex_row" :key="index" v-for="(sensor,index) in sensorList">
                      <span class="sensor_box" style="width: 18%">{{index+1}}</span>
                      <span class="sensor_box" style="width: 30%">{{sensor.name}}</span>
                      <span class="sensor_box" style="width: 10%">{{sensor.status=='Y'?'在线':'离线'}}</span>
                      <span class="sensor_box" style="width: 150px;margin-left: 20px;">{{sensor.updateTime}}</span>
                    </li>
                  </ul>
                </div>
              </div><!--top5-content end PM2.5-->
            </div><!--top5 end PM2.5-->
          </div><!--up end PM2.5-->
          <div class="down">
            <div class="chart_title"><span>平均CO2统计</span></div>
            <div class="roundChart"></div>
          </div><!--mid end 传感器概况-->
          <div class="down">
            <div class="right_title"><span>平均温度统计</span></div>
            <div class="pillarChart"></div>
          </div><!--down end 平均温度---->
        </a-layout-content>
        <!-- left  end-->
        <!-- middle-->
        <a-layout-content class="content_middle">
          <div class="total">
            <div class="data1">
              <span>平均温度</span>
              <p v-if="sensor.alarmFlagWd" style="color: red">{{sensor.temperature}}(℃)</p>
              <p v-if="!sensor.alarmFlagWd">{{sensor.temperature}}(℃)</p>
            </div>
            <div class="data2">
              <span>平均湿度</span>
              <p v-if="sensor.alarmFlagSd" style="color: red">{{sensor.humidity}}(RH)</p>
              <p v-if="!sensor.alarmFlagSd">{{sensor.humidity}}(RH)</p>
            </div>
            <div class="data3">
              <span>PM2.5平均值</span>
              <p v-if="sensor.alarmFlagPm25" style="color: red">{{sensor.pm25}}(ug/m³)</p>
              <p v-if="!sensor.alarmFlagPm25">{{sensor.pm25}}(ug/m³)</p>
            </div>
            <div class="data4">
              <span>CO2平均值</span>
              <p v-if="sensor.alarmFlagCo2" style="color: red">{{sensor.pm10}}(ppm)</p>
              <p v-if="!sensor.alarmFlagCo2">{{sensor.pm10}}(ppm)</p>
            </div>
            <canvas class="rain"></canvas>
            <canvas class="dashed"></canvas>
            <div class="sphere">
              <div class="sphere-bg"></div>
              <div class="sum">
                <span> </span>
                <p>环境监测</p>
              </div>
            </div>
            <div class="cicle3"></div>
            <div class="cicle4"></div>
            <div class="cicle5"></div>
            <div class="cicle6"></div>
            <div class="cicle7"></div>
            <div class="cicle8">
              <span>温度</span>
              <p>{{sensor.temperature}}(℃)</p>
            </div>
            <div class="cicle9">
              <span>湿度</span>
              <p>{{sensor.humidity}}(RH)</p>
            </div>
            <div class="cicle10">
              <span>PM2.5</span>
              <p>{{sensor.pm25}}(ug/m³)</p>
            </div>
            <div class="cicle11">
              <span>CO2</span>
              <p>{{sensor.pm10}}(ppm)</p>
            </div>
          </div><!--total end 主体部分-->
        </a-layout-content>
        <!--middle end 主体部分-->
        <!-- right-->
        <a-layout-content class="content_right flex_column">

          <div class="mid flex_column">
            <div class="mid_title"><span>环境监测</span></div>
            <div class="circles flex_row">
              <div class="circle_pic">
                <span class="tx1">PM2.5</span>
                <span class="tx2">湿度</span>
                <span class="tx3">CO2</span>
                <span class="tx4">温度</span>
                <span class="tx5">环境监测</span>
              </div>
              <div class="circle_note">
                <div class="note flex-row">
                  <span class="note_text">PM2.5:</span>
                  <span class="note_ex">{{sensor.pm25}}(ug/m3)</span>
                </div>
                <div class="note flex-row">
                  <span class="note_text">CO2:</span>
                  <span class="note_ex">{{sensor.pm10}}(ppm)</span>
                </div>
                <div class="note flex-row">
                  <span class="note_text">温度:</span>
                  <span class="note_ex">{{sensor.temperature}}(℃)</span>
                </div>
                <div class="note flex-row">
                  <span class="note_text">湿度:</span>
                  <span class="note_ex">{{sensor.humidity}}(RH)</span>
                </div>
              </div>

            </div>
          </div>
          <div class="down">
            <div class="right_title"><span>平均PM2.5统计</span></div>
            <div id="myChartBox" class="myChartBox"></div>
          </div>
          <div class="down">
            <div class="right_title"><span>平均湿度统计</span></div>
            <div class="lineChart"></div>
          </div>
        </a-layout-content>
        <!-- right  end-->
      </a-layout>
      <!-- 底部模块 -->
      <a-layout-footer class="layout_footer">
        <h5><span>数据状况</span></h5>
        <p>Data Status</p>
      </a-layout-footer>
    </a-layout>
  </div>
</template>
<script>
    import {mainshow} from '@/mixins/mainshow.js'
    import {httpAction} from '@/api/manage'
    import {USER_INFO_DEPT} from "@/store/mutation-types"
    import Vue from 'vue'
    import {mapActions} from "vuex"

    export default {
        name: "GlrMain",
        mixins: [mainshow],
        data() {
            return {
                sensor: {},
                mainData: {},
                url: {
                    getGlrMainData: "/glr/glrHomeController/getGlrMainData",
                    getGlrMainChart: "/glr/glrHomeController/getGlrMainChart",
                    getGlrMainSenSor: "/glr/glrHomeController/getGlrMainSenSor",
                    getLedImgByCode: "/glr/glrLed/getLedImgByCode",
                    getProjectList: "/glr/glrProject/getProject",
                },
                bookList: [],
                sensorList: [],
                dateList: [],
                sensor: {},
                sensorSet: {}
            }
        },
        computed: {},
        created() {
            var w = document.documentElement.clientWidth / 80;
            document.documentElement.style.fontSize = w + 'px';
            this.resetPage();
        },
        methods: {
            resetPage() {
                var that = this;
                setInterval(function () {
                    that.getMainData();    //刷新页面
                }, 1000 * 60 * 10);   //10分钟更新一次数据
            },
            getMainData() {
                this.$echarts.init(document.querySelector(".pillarChart")).dispose();
                this.$echarts.init(document.querySelector(".roundChart")).dispose();
                this.$echarts.init(document.querySelector(".lineChart")).dispose();
                this.$echarts.init(document.querySelector(".myChartBox")).dispose();
                var that = this;
                httpAction(that.url.getGlrMainChart, {}, "get").then((res) => {
                    if (res.success) {
                        that.dateList = res.result.dateList;
                        var humidityList = res.result.humidityList;
                        var temperatureList = res.result.temperatureList;
                        var pm10List = res.result.pm10List;
                        var pm25List = res.result.pm25List;
                        that.sensor = res.result.sensor;
                        that.sensorList = res.result.sensorList;
                        that.sensorSet = res.result.sensorSet;
                        this.lineChart_wd('.pillarChart', that.dateList, temperatureList);//温度
                        this.lineChartN_02('.roundChart', that.dateList, pm10List);//co2
                        this.lineChartN_sd('.lineChart', that.dateList, humidityList);//湿度
                        this.lineChartN_pm25('.myChartBox', that.dateList, pm25List);//pm25
                    } else {
                        that.$message.warning(res.message);
                    }
                }).finally(() => {
                    that.confirmLoading = false;
                })
            },
            goAdmin() {
                this.$router.push({path: "/dashboard/analysis"});
            },
            ...mapActions(["Logout"]),
            handleLogout() {
                const that = this;
                this.$confirm({
                    title: '提示',
                    content: '真的要注销登录吗 ?',
                    onOk() {
                        return that.Logout({}).then(() => {
                            window.location.href = "/sensor";
                        }).catch(err => {
                            that.$message.error({
                                title: '错误',
                                description: err.message
                            })
                        })
                    },
                    onCancel() {
                    },
                });
            },
        },
        mounted() {
            this.getMainData();
            this.dashed();//中间虚线
            this.rainBg();//中间背景雨
        },
    }
</script>
<style scoped src="@/assets/css/main.css">
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
</style>